<script setup>

import CardBox from "@/components/CardBox/index.vue";
import {getDicts, updateData} from "@/api/system/dict/data.js";
import bgImage from '@/assets/images/login-background.jpg';
import ImageUpload from "@/components/ImageUpload/index.vue";
import {ElMessage} from "element-plus";

const state = reactive({
  bgImage: "",
  footer1: "",
  footer2: "",
  footer3: "",
})
// 获取背景数据
const getData1 = async () => {
  const res = await getDicts("login_manager");
  res.data.forEach(item => {
    if (item.dictLabel === "login_bg") {
      state.bgImage = item.dictValue
      if (state.bgImage == "null") {
        state.bgImage = bgImage
      }
    }
    if (item.dictLabel === "footer1") {
      state.footer1 = item.dictValue
    }

    if (item.dictLabel === "footer2") {
      state.footer2 = item.dictValue
    }

    if (item.dictLabel === "footer3") {
      state.footer3 = item.dictValue
    }
    if (item.dictLabel === "footer4") {
      state.footer4 = item.dictValue
    }
  })
}

const submit = async () => {
  await updateData({dictCode: 101, dictLabel: "login_bg", dictValue: state.bgImage, dictType: "login_manager"})
  await updateData({dictCode: 102, dictLabel: "footer1", dictValue: state.footer1, dictType: "login_manager"})
  await updateData({dictCode: 103, dictLabel: "footer2", dictValue: state.footer2, dictType: "login_manager"})
  await updateData({dictCode: 104, dictLabel: "footer3", dictValue: state.footer3, dictType: "login_manager"})
  await updateData({dictCode: 105, dictLabel: "footer4", dictValue: state.footer4, dictType: "login_manager"})
  ElMessage.success("修改成功")
}

onMounted(() => {
  getData1()
})
</script>

<template>
  <div class="outBox">
    <CardBox style="margin-bottom: 20px" title="登录页面管理">
      <template #content>
        <el-form ref="queryRef" label-width="auto">
          <el-form-item label="背景图片">
            <div class="imgBox">
              <ImageUpload v-model="state.bgImage" :limit="1" :file-size="20"/>
              <!--              <p>(点击修改背景图片)</p>-->
            </div>
          </el-form-item>
          <el-form-item label="底部文字1">
            <el-input v-model="state.footer1"/>
          </el-form-item>
          <el-form-item label="底部文字2">
            <el-input v-model="state.footer2"/>
          </el-form-item>
          <el-form-item label="底部文字3">
            <el-input v-model="state.footer3"/>
          </el-form-item>
          <el-form-item label="底部文字4">
            <el-input v-model="state.footer4"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit">保存</el-button>
          </el-form-item>
        </el-form>
      </template>
    </CardBox>
  </div>
</template>

<style scoped lang="scss">
.imgBox {
  img {
    width: 100px;
    height: 100px;
  }

  p {
    margin: 0 !important;
  }
}
</style>
